import { useEffect, type FunctionComponent } from "react";
import RightNavItem from "./components/Item";
import RightNavListItem from "./components/ListItem";
import NavMenuItem from "./components/MenuItem";
import NavSearch from "./components/Search";

interface RightNavProps {

}

const AboutList = [
  {
    text: "更新日志",
    link: "/about/changelog",
  },
  {
    text: "团队成员",
    link: "/about/members",
  },
  {
    text: "许可证",
    link: "/about/license",
  }
]

const getSubItemList = (items: typeof AboutList) => {
  return items.map(({ text, link }) => (
    <NavMenuItem key={text}>
      <a href={link} className="flex justify-center w-full">{text}</a>
    </NavMenuItem>
  ))
}

const RightNav: FunctionComponent<RightNavProps> = () => {
  return (
    <div className="h-full hidden md:flex">
      <NavSearch />
      <RightNavItem>
        <a href="/wiki/preview" className="w-full h-full flex items-center">词条一览</a>
      </RightNavItem>
      <RightNavItem>
        <a href="/download" className="w-full h-full flex items-center">下载MOD</a>
      </RightNavItem>
      <RightNavListItem popover={getSubItemList(AboutList)}>
        关于本站
      </RightNavListItem>
    </div>
  );
}

export default RightNav;
